<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>志愿者注册</title>
    <include file="public@mobile_head"/>
</head>
<body class="page-userinfo">
<!--头部-->
<div class="head">
    <div class="head-title"><a href="javascript:;" class="backTop" onclick="javascript:history.back(-1);">
            <i class="layui-icon layui-icon-left"></i>
        </a>志愿者登记</div>
</div>
<div class="zctj registere">
    <div class="topTitle">
        <div class="title">
            详细信息
        </div>
    </div>
    <div class="content registereForm">
        <!--<form class="layui-form" action="{:url('mobile/user/save_info')}" method="post">-->
        <form class="layui-form" id="form">
            <input type="hidden" name="org_id" value="{$org_id}">
            <div class="formLeft">
                <div class="layui-form-item">
                    <label class="layui-form-label widthSty">昵称</label>
                    <div class="layui-input-block">
                        <input type="text" name="user_nickname" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label widthSty">身份证号<br></label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" id="idcard" name="more[idcard]" required  lay-verify="required" placeholder="请输入身份证号" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->

                <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">性别:</label>-->
                <!--<div class="layui-input-block">-->
                <!--<input type="radio" name="sex" value="1" title="男" checked>-->
                <!--<input type="radio" name="sex" value="2" title="女">-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label widthSty">出生日期:<br>(和身份证一致)</label>-->
                <!--<div class="layui-input-block">-->
                <!--<input class="form-control " id="datetime" type="text" name="birthday"-->
                <!--value="1990-01-01">-->
                <!--&lt;!&ndash;<input type="text" name="birthday" class="layui-input" id="date" placeholder="yyyy-MM-dd" >&ndash;&gt;-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">籍贯</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" name="more[native]" required  lay-verify="required" placeholder="请输入籍贯" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">政治面貌</label>
                    <div class="layui-input-block">
                        <select name="more[politic]" lay-verify="required">
                            <option value=""></option>
                            <option value="群众">群众</option>
                            <option value="团员">团员</option>
                            <option value="党员">党员</option>
                        </select>
                    </div>
                </div>
                <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">固定电话:</label>-->
                <!--<div class="layui-input-block">-->
                <!--<input type="text" name="title" required  lay-verify="required" placeholder="请输入您的固定电话" autocomplete="off" class="layui-input">-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">手机号码:</label>-->
                <!--<div class="layui-input-block">-->
                <!--<input type="text" name="phone" required  lay-verify="required" placeholder="请输入您的移动电话" autocomplete="off" class="layui-input">-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">现住址</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" name="more[address]" required  lay-verify="required" placeholder="请输入您的现住址" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->

               <div class="layui-form-item">
                    <label class="layui-form-label">社区</label>
                    <div class="layui-input-block">
                        <select id="province" name="district" lay-filter="province" lay-verify="required" lay-search="">
                            <option value="">请选择区县</option>
                        </select>
                    </div>
                    <div class="layui-input-block userTop">
                        <select id="city" name="street" lay-filter="city" lay-verify="required" lay-search="">
                            <option value="">请选择街道</option>
                        </select>
                    </div>
                    <div class="layui-input-block userTop">
                        <select id="area" name="community" lay-filter="area" lay-verify="required" lay-search="">
                            <option value="">请选择社区</option>
                        </select>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">团体</label>
                    <div class="layui-input-block">
                        <select name="more[group]" lay-verify="required">
                            <foreach name="group" id="vo">
                                <option value="">请选择团体</option>
                                <option value="{$vo.id}">{$vo.name}</option>
                            </foreach>
                        </select>
                    </div>
                </div>

                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">工作单位</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" name="more[company]" required  lay-verify="required" placeholder="请输入你的工作单位" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">QQ:</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" name="more[qq]" required  lay-verify="required" placeholder="请输入你的QQ" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">微信</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" name="more[weixin]" required  lay-verify="required" placeholder="请输入你的微信" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">职业</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<select name="more[work]" lay-verify="required">-->
                            <!--<option value=""></option>-->
                            <!--<option value="保密">保密</option>-->
                            <!--<option value="金融">农村农业</option>-->
                            <!--<option value="生产加工">生产加工</option>-->
                            <!--<option value="制造">制造</option>-->
                            <!--<option value="服务娱乐">服务娱乐</option>-->
                            <!--<option value="政治">政治</option>-->
                            <!--<option value="科研教育">科研教育</option>-->
                            <!--<option value="管理">管理</option>-->
                            <!--<option value="商业">商业</option>-->
                            <!--<option value="其他">其他</option>-->
                        <!--</select>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">文化程度</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<select name="more[educate]" lay-verify="required">-->
                            <!--<option value=""></option>-->
                            <!--<option value="小学">小学</option>-->
                            <!--<option value="初中">初中</option>-->
                            <!--<option value="高中">高中</option>-->
                            <!--<option value="大专">大专</option>-->
                            <!--<option value="本科">本科</option>-->
                            <!--<option value="硕士">硕士</option>-->
                            <!--<option value="博士">博士</option>-->
                        <!--</select>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item layui-form-text">-->
                <!--<label class="layui-form-label">工作学习经历:</label>-->
                <!--<div class="layui-input-block">-->
                <!--<textarea name="more[experience]" placeholder="请输入您的工作学习经历" class="layui-textarea"></textarea>-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item layui-form-text">-->
                    <!--<label class="layui-form-label">爱好特长</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<textarea name="more[hobby]" placeholder="例如:看书，跑步" class="layui-textarea"></textarea>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item layui-form-text">-->
                    <!--<label class="layui-form-label">补充信息</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<textarea name="more[extra]" placeholder="请输入补充信息" class="layui-textarea"></textarea>-->
                    <!--</div>-->
                <!--</div>-->
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <input type="hidden" name="avatar" id="img" value="__TMPL__/public/assets/img/head.png">
                        <a href="javascript:;" class="" id="test1">
                            <img src="__TMPL__/public/assets/img/head.png"
                                 id="pic"
                                  style="cursor: pointer;width:5.5rem;"/>
                            <div style="margin-top: 5px;">上传头像图片</div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="checkbox" name="anothor" value="{$org_id==1?'2':1}" title="同时加入{$org_id==1?'啄木鸟':'牵手'}志愿者">
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>车辆信息</legend>
            </fieldset>
            <!--<form class="layui-form" action="">-->
                <div class="layui-form-item">
                    <label class="layui-form-label">车牌号（选填）</label>
                    <div class="layui-input-block">
                        <input type="text" name="car_card" required  placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>



            <div class="layui-row layui-col-space30">
                <div class="layui-col-md6 layui-col-xs6 layui-col-sm6">
                    <div class="layui-upload-drag" id="test10">
                        <a href="javascript:;">
                            <input type="hidden" name="img_a" id="a" value="">
                            <div class="topImg">
                                <img src="/html/img/scImg.png" id="imga">
                            </div>
                            <p>请上传行驶证（正页）</p>
                        </a>
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-xs6 layui-col-sm6">
                    <div class="layui-upload-drag" id="test11">
                        <a href="javascript:;">
                            <input type="hidden" name="img_b" id="b" value="">
                            <div class="topImg">
                                <img src="/html/img/scImg.png" id="imgb">
                            </div>
                           <p>请上传行驶证（副页）</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="tishi">(车辆信息上传审核通过后，不可更改，不限本人名下车辆)</div>


            <div style="clear: both;"></div>


            <div class="nextBtn">
                <!--<button  id="Btn" type="submit" class="layui-btn btn btn-primary  js-ajax-submit">保存</button>-->
                <button  id="Btn" type="button" class="layui-btn btn btn-primary  js-ajax-submit">保存</button>
            </div>
        </form>

        <div style="clear: both;"></div>
    </div>
</div>

</body>
<script type="text/javascript" src="/html/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/html/layui/layui.js"></script>
<script>
    layui.use(['form','layer','jquery'],function(){
        var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : parent.layer,
                $ = layui.jquery;

        $( '#idcard').blur( function(e){
            var idcard=$( '#idcard').val()
            $.ajax({
                type: "post",
                url: "/portal/index/check_idcard",
                data:{"idcard":idcard},
                dataType: "json",
                success: function(res) {
                    layer.msg(res)
                    console.log(res)
                }
            });
        })

        var provinceText = "";
        var cityText = "";
        var areaText = "";
        //异步加载下拉框数据
        $.ajax({
            type: "post",
            url: "/portal/index/get_district",
            dataType: "json",
            success: function(res) {
                $html=''
                $.each(res, function (index, item) {
                    $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                });
                $("#province").append($html);
                //append后必须从新渲染
                form.render('select');
            }
        });


        //监听省下拉框
        form.on('select(province)', function(dataObj){
            console.log(1)
            //移除城市下拉框所有选项
            $("#city").empty();
            var cityHtml = '<option value="">请选择街道</option>';
            $("#city").html(cityHtml);
            var areaHtml = '<option value="">请选择社区</option>';
            $("#area").html(areaHtml);
            provinceText = $("#province").find("option:selected").text();
            var value = $("#province").val();
            console.log(value)
            //异步加载下拉框数据

            $.ajax({
                type: "post",
                url: "/portal/index/get_street",
                data:{"id":value},
                dataType: "json",
                success: function(res) {
                    $html=''
                    var $html = "";
                    $.each(res, function (index, item) {
                        $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    });
                    $("#city").append($html);
                    //append后必须从新渲染
                    form.render('select');
                }
            });
        });

        //监听市下拉框
        form.on('select(city)', function(dataObj){
            //移除县区下拉框所有选项
            $("#area").empty();
            var html = '<option value="">请选择社区</option>';
            $("#area").html(html);

            cityText = $("#city").find("option:selected").text();
            var value = $("#city").val();
            //异步加载下拉框数据
            $.ajax({
                type: "post",
                url: "/portal/index/get_community",
                data:{"id":value},
                dataType: "json",
                success: function(res) {
                    $html=''
                    var $html = "";
                    $.each(res, function (index, item) {
                        $html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    });
                    $("#area").append($html);
                    //append后必须从新渲染
                    form.render('select');
                }
            });
        });

        //监听县区下拉框
        form.on('select(area)', function(dataObj){
            areaText = $("#area").find("option:selected").text();
        });
    });


    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/portal/index/up_picture' //上传接口
            ,done: function(res){
                console.log(res.url);
                $("#img").val(res.url);
                $('#pic').attr('src',res.url);
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });

        //上传正面
        var uploadInst = upload.render({
            elem: '#imga' //绑定元素
            ,url: '/portal/index/up_picture' //上传接口
            ,done: function(res){
                console.log(res.url);
                $("#a").val(res.url);
                $('#imga').attr('src',res.url);
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
        //上传反面
        var uploadInst = upload.render({
            elem: '#imgb' //绑定元素
            ,url: '/portal/index/up_picture' //上传接口
            ,done: function(res){
                console.log(res.url);
                $("#b").val(res.url);
                $('#imgb').attr('src',res.url);
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    var bootstrapDateTimeInput = $("#datetime");
    if (bootstrapDateTimeInput.length) {
        Wind.css('bootstrapDatetimePicker');
        Wind.use('bootstrapDatetimePicker', function () {
            bootstrapDateTimeInput.datetimepicker({
                minView: "month", //选择日期后，不会再跳转去选择时分秒
                language:  'zh-CN',
                format: 'yyyy-mm-dd',
                todayBtn:  1,
                autoclose: 1,
            });
        });
    }
    layui.use(['form','layer'], function(){
        var form = layui.form
                ,layer = layui.layer;

//        laydate.render({
//            elem: '#date'
//            //,type: 'date' //默认，可不填
//        });

        //监听提交
//        form.on('submit(formDemo)', function(data){
//            console.log(data)
//            layer.msg(JSON.stringify(data.field));
//            return false;
//        });
        $("#Btn").click(function () {
            var data=$('#form').serialize()
            $.ajax({
                type: "post",
                url: "/portal/index/save_info",
                data: data,
                dataType: "json",
                success: function(res) {
                    layer.msg(res.msg)
                    if(!res.error){
                        setTimeout(function(){ window.location.href = '/mobile/'; }, 2000);
                    }
                }
            });

        })
    });
</script>
</html>